<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入</title>
    <link rel="icon" href="/base/pic/icon/xijia.png" type="image/x-icon">  <!--在网页标题左侧显示图标-->
    <link rel="shortcut icon" href="/base/pic/icon/xijia.png" type="image/x-icon"> <!-- 在收藏夹显示图标-->

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/login.css" media="all">

    <script src="/manage/js/app.js"></script>
    <!--    &lt;!&ndash;  验证码插件 &ndash;&gt;-->

    <script src="/components/verifCode/jq_slideImage.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<script>
    //登录页加密
    let config = Ajax.get(path + "/admin/xj/config/findByCode?code=is_login_token");
    if (config.data != null) {
        if (config.data.content !== "false") {
            let code = prompt("请输入访问令牌：");
            if (code === null || code !== loginPwd) {
                if (code === null) {
                    alert("不可取消");
                } else {
                    alert("令牌错误,拒绝访问");
                }
                location.href = window.location.href;
            }
        }
    }
</script>

<style>

    /* 背景图 */
    .xijiaLoginDiv {
        background-size: 100% 100%; /* 图片大小 */
        /* filter: alpha(Opacity=95); */
        /* -moz-opacity: 0.95; */
        /* opacity: 0.95;      */
    }

    /**
     * 输入框,登录按钮半透明
     * 1、baifilter：对win IE设置半透du明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，zhi火狐浏览器不认
     * 2、-moz-opacity：对mozilla firefox火狐浏览器实dao现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%
     * 3、opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明
     */
    .xijiaTransparent {
        filter: alpha(Opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }


</style>
<div class="xijiaLoginDiv" style="width: 100%;height: 100%">
    <div class=" layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
        <div class=" layadmin-user-login-main">
            <!-- 登录页标题处  -->
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2 id="entry_name"></h2>
                <!--  <p>layui 官方出品的单页面后台管理模板系统 </p>-->
            </div>

            <!-- 账号密码输入处  -->
            <div class="  layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="xijiaTransparent layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                    <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" value="" placeholder="用户名" class="layui-input">
                </div>
                <div class="xijiaTransparent layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" value="" placeholder="密码" class="layui-input">
                </div>

                <!--  验证码设置处  -->
                <div class="layui-form-item">
                    <div style="width: 100%;margin: 0 auto;height: 180px;"><!--外层这div是为了测试  滑块会不会直接跑右边  不是必要的-->
                        <div class="demo2" id="slideImageWrap2" style="width: 100%;height: 100%;">
                        </div> <!--style="display:none;"-->
                    </div>
                </div>

                <!-- -->
                <!--     <span style="float:right ;margin-bottom: 20%" >刷新</span>-->
                <!-- 设置记住忘记密码添加 处 -->
                <!--  <div class="layui-form-item" style="margin-bottom: 20px;">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                    <a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
                </div>-->


                <div class="xijiaTransparent layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
                </div>

                <!-- 社交账号登入处  -->
                <!--            <div class="layui-trans layui-form-item layadmin-user-login-other">-->
                <!--                <label>社交账号登入</label>-->
                <!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>-->
                <!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
                <!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>-->

                <!--                <a href="reg.html" class="layadmin-user-jump-change layadmin-link">注册帐号</a>-->
                <!--            </div>-->
            </div>
        </div>

        <!-- 底部字体添加处 -->
        <div class="layui-trans layadmin-user-login-footer">
            <p id="project_desc"></p>
            <a id="beian" href="https://beian.miit.gov.cn"></a>
            <!--        <p>-->
            <!--    <p>© 2018 <a href="http://www.layui.com/" target="_blank">layui.com</a></p>-->
            <!--            <span><a href="http://www.layui.com/admin/#get" target="_blank">获取授权</a></span>-->
            <!--            <span><a href="http://www.layui.com/admin/pro/" target="_blank">在线演示</a></span>-->
            <!--            <span><a href="http://www.layui.com/admin/" target="_blank">前往官网</a></span>-->
            <!--        </p>-->
        </div>
    </div>
</div>

<script>

    //登录接口
    let admin_login = path + "/admin/user/login";         // 登录接口
    var verifCode = false;

    /** session过期，登录页在内窗口，跳为最顶层窗口 */
    if (window !== top) {
        top.location.href = window.location.href;
    }

    layui.config({
        base: '../../components/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user'], function () {
        layui.form.render();
        // 提交监听
        layui.form.on('submit(LAY-user-login-submit)', function (obj) {
            if (!verifCode) {
                layer.msg("请滑动图片进行验证");
                return;
            }
            let param = "";
            param += "?username=" + obj.field.username;
            param += "&password=" + obj.field.password;
            // let data = {
            //     username: obj.field.username,
            //     password: obj.field.password
            // };
            // 请求成功，会在ajax请求响应后自动写入用户信息-token 字符串数据到本地 // 读取方法 sessionStorage.getItem('token')
            let res = Ajax.post(admin_login + param);
            location.href = "/index";
        });

        // 项目名
        let res = Ajax.get(path + "/admin/xj/config/findByCode?code=entry_name");
        $("#entry_name").html(res.data.content);

        // 背景图
        res = Ajax.get(path + "/admin/xj/config/findByCode?code=login_bg_img");
        $(".xijiaLoginDiv").css("background", "url(" + res.data.content + ")");

        // 备案号：蜀ICP备19022468号-1
        res = Ajax.get(path + "/admin/xj/config/findByCode?code=beian");
        $("#beian").html(res.data.content);

        // 项目描叙
        res = Ajax.get(path + "/admin/xj/config/findByCode?code=project_desc");
        $("#project_desc").html(res.data.content);

        // 初始化操作
        init();
    });

    function init() {
         // 加签测试
         // let data = [];
         // Ajax.post("/api/open/xj/sign/test1", data);
    }

</script>


<!-- 滑动验证码 -->
<script>
    // 滑动的随机图片列表(只能用本地图片)
    let verifCodeImg = [
        "components/verifCode/image/tp1.jpg",
        "components/verifCode/image/tp2.jpg",
        "components/verifCode/image/tp3.jpg",
        "components/verifCode/image/tp4.jpg",
    ];
    let index = Math.floor(Math.random() * verifCodeImg.length);
    show();

    function show() {
        // 加载验证码
        let mySlideImage2 = new SlideImageVerify('#slideImageWrap2', {
            initText: '请滑动拼图完成验证',
            slideImage: verifCodeImg[index],
            //slideImage:'https://uploadbeta.com/api/pictures/random/?key=%E4%BA%8C%E6%AC%A1%E5%85%83',
            slideAreaNum: 20,
            refreshSlide: false,
            getSuccessState: function (res) {
                //成功
                verifCode = true;
                console.log(res);
            }
        });
    }
</script>
</body>
</html>

